<template>
  <div class="good_box">
    <div class="good_item_box" v-for="item in list">
      <div class="good_item">
        <div class="good_item_title">{{ item.title }}</div>
        <div class="good_item_content">
          <div class="good_item_content_item" v-for="e in item.arr">
            <el-descriptions :column="2" size="small" border>
              <el-descriptions-item label="名称" :span="2">
                <span style="font-weight: bold; color: #606266">
                  {{ e.name }}</span
                ></el-descriptions-item
              >
              <el-descriptions-item label="订购渠道">{{ e.obj.name }}</el-descriptions-item>
              <el-descriptions-item label="订购时间">{{ e.obj.date }}</el-descriptions-item>
              <el-descriptions-item label="有效期限" :span="2">
                {{ e.obj.time.start }} <span style="font-weight: bold"> 至 </span>
                {{ e.obj.time.end }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, onMounted } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})
const list = ref([])
onMounted(() => {
  getData()
})
function getData() {
  list.value = props.data.tableData
}
</script>

<style scoped lang="less">
.good_box {
  width: 100%;
  .good_item_box {
    .good_item {
      padding: 0 5px;
    }
    .good_item_title {
      padding: 10px 18px;
      position: relative;
      font-size: 13px;
      font-weight: bold;
      color: #606266;
      &::before {
        content: '';
        position: absolute;
        top: 15px;
        left: 3px;
        width: 8px;
        height: 9px;
        border-radius: 1px;
        background-color: #409eff;
      }
    }
    .good_item_content {
      .item_content_item {
        margin-bottom: 10px;
      }
    }
  }
}
::v-deep .el-descriptions__label {
  width: 80px !important;
}
::v-deep .el-descriptions__header {
  padding: 0 10px;
  box-sizing: border-box;
}
</style>
